<template>
  <div class="dashboard-editor-container">
    <el-date-picker v-model="dateRange" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" @change="getData" end-placeholder="结束日期" :picker-options="pickerOptions">
    </el-date-picker>
    <el-row style="margin-top:30px;background:#fff;padding:15px 15px 0;">
      <span>应用打开次数排行</span>
      <bar-chart :chart-data="appOpenData"></bar-chart>
    </el-row>
    <el-row style="margin-top:30px;background:#fff;padding:15px 15px 0;">
      <span>应用点击次数排行</span>
      <bar-chart :chart-data="appMotionData"></bar-chart>
    </el-row>
    <el-row style="margin-top:30px;background:#fff;padding:15px 15px 0;">
      <span>设备应用打开次数排行</span>
      <bar-chart :chart-data="distributionAppOpenData"></bar-chart>
    </el-row>
    <el-row style="margin-top:30px;background:#fff;padding:15px 15px 0;">
      <span>设备点击次数排行</span>
      <bar-chart :chart-data="distributionMotionData"></bar-chart>
    </el-row>
  </div>
</template>

<script>
  import BarChart from '../components/BarChart'
  import { getWeeklyData, listBehavior } from '@/api/monitor'

  export default {
    components: {
      BarChart
    },
    data() {
      return {
        dateRange: [],
        appOpenData: {
          counts: [],
          names: []
        },
        appMotionData: {
          counts: [],
          names: []
        },
        distributionAppOpenData: {
          counts: [],
          names: []
        },
        distributionMotionData: {
          counts: [],
          names: []
        },
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > (Date.now() - 24 * 3600 * 1000)
          },
          shortcuts: [{
            text: '过去七天',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              end.setTime(end.getTime() - 3600 * 1000 * 24)
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '过去30天',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              end.setTime(end.getTime() - 3600 * 1000 * 24)
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '过去90天',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              end.setTime(end.getTime() - 3600 * 1000 * 24)
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }]
        }
      }
    },
    created() {
      const end = new Date()
      const start = new Date()
      end.setTime(end.getTime() - end.getTime() % (3600 * 1000 * 24) - 32 * 3600 * 1000)
      start.setTime(end.getTime() - 3600 * 1000 * 24 * 6)
      this.dateRange.push(start)
      this.dateRange.push(end)
      this.getData()
    },
    methods: {
      getData() {
        var start, end
        if (this.dateRange !== null) {
          start = this.dateRange[0].getTime()
          end = this.dateRange[1].getTime()
          end += 3600 * 1000 * 24 -1
        }
        var appOpenParams = {
          limit: 25,
          filter: true,
          collectionName: 'deviceAppAggregation',
          start: start,
          end: end
        }
        getWeeklyData(appOpenParams).then(response => {
          const result = response.data
          this.appOpenData = {
            counts: [],
            names: []
          }
          result.forEach(object => {
            this.appOpenData.counts.push(object.count)
            this.appOpenData.names.push(object.name)
          })
        })
        var appMotionParams = {
          limit: 25,
          filter: true,
          collectionName: 'deviceAppMotionAggregation',
          start: start,
          end: end
        }
        getWeeklyData(appMotionParams).then(response => {
          const result = response.data
          this.appMotionData = {
            counts: [],
            names: []
          }
          result.forEach(object => {
            this.appMotionData.counts.push(object.count)
            this.appMotionData.names.push(object.name)
          })
        })
        var distributionAppOpenParams = {
          start: start,
          end: end,
          limit: 20,
          sortType: 3,
          page: 0,
          size: 25
        }
        listBehavior(distributionAppOpenParams).then(response => {
          const result = response.data.data.result
          this.distributionAppOpenData = {
            counts: [],
            names: []
          }
          result.forEach(object => {
            this.distributionAppOpenData.counts.push(object.appOpenCount)
            if (object.distribution.status !== 4) {
              this.distributionAppOpenData.names.push(object.distribution.name)
            } else {
              this.distributionAppOpenData.names.push(object.device.number)
            }
          })
        })
        var distributionMotionParams = {
          start: start,
          end: end,
          limit: 20,
          sortType: 1,
          page: 0,
          size: 25
        }
        listBehavior(distributionMotionParams).then(response => {
          const result = response.data.data.result
          this.distributionMotionData = {
            counts: [],
            names: []
          }
          result.forEach(object => {
            this.distributionMotionData.counts.push(object.motionCount)
            if (object.distribution.status !== 4) {
              this.distributionMotionData.names.push(object.distribution.name)
            } else {
              this.distributionMotionData.names.push(object.device.number)
            }
          })
        })
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .dashboard-editor-container {
    padding: 30px;
    background-color: rgb(240, 242, 245);
  .chart-wrapper {
    background: #fff;
    padding: 15px 15px 0;
  }
  }
</style>
